<template>
  <div class="list">
    <ul>
      <li class="item" v-for="(item) in letters"
       :key="item" 
       :ref="item"
      @click="HandleAlphabetClick"
      @touchstart="handlemovestart"
      @touchmove="handlemove"
      @touchend="handlemoveend"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CityAlphabet",
  props:{
      cities:Object
  },
  data () {
    return {
      touchStats:false,
      timer:null
    }
  },
  computed:{
    letters () {
      
      const mylet=[]
      for (let i in this.cities) {
        mylet.push(i)
      }
      return mylet
    }
  },
  methods:{
    HandleAlphabetClick (e) {
      this.$emit("clickalphabet",e.target.innerText)
    },
    handlemovestart () {
      this.touchStats=true
    },
    handlemove (e) {
      if (this.touchStats=true){
        
        if (this.timer){
          clearTimeout(this.timer)
        }
        this.timer=setTimeout(()=>{
          const startY=this.$refs['A'][0].offsetTop
          const touchY=e.touches[0].clientY
          const index=Math.floor((touchY-startY)/20)
          if (index >= 0 && index <= this.letters.length){
            this.$emit("clickalphabet",this.letters[index])
          }
        },16)
        console.log(this.timer)  
      }
    },
    handlemoveend () { 
      this.touchStats=false
    }
    
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
  display flex
  flex-direction column
  justify-content center
  position absolute
  right 0
  top 1rem
  bottom 0
  width 1.4rem
  .item
    text-align center
    line-height 1rem
    color  $bgcolor
    font-size .80rem
</style>
